<template>
  <div class="homeMap bg-gradient-to-br from-gray-100 to-gray-200 p-0">
    <!-- 内容区域 -->
    <div class="homeMap-content absolute inset-0 bg-gray-200 relative overflow-hidden">
      <div class="map-wrapper">
        <MapEl 
          ref="JMap"
          @zoom-change="mapZoonChange"
          @center-change="mapCenterChange" />

        <template v-if="currentLayerItem === 'realtimeSz'">
          <MapLayerPointSz
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <template v-if="currentLayerItem === 'realtimeBz'">
          <MapLayerPointBz
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <template v-if="currentLayerItem === 'realtimeSk'">
          <MapLayerPointSk 
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <template v-if="currentLayerItem === 'realtimeNld'">
          <MapLayerPointNld 
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <template v-if="currentLayerItem === 'realtimeHdz'">
          <MapLayerPointHdz 
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <template v-if="currentLayerItem === 'realtimeYlz'">
          <MapLayerPointYlz
            v-for="item in currentLayerList"
            :key="item.id"
            :left="item.left" 
            :top="item.top"
            :itemData="item"
            @mouseenter="showInfo(item)" 
			      @mouseleave="hideInfo" />
        </template>

        <div 
          v-show="isShowMapLayerInfo" 
          class="mapLayerInfo" 
          :style="{ 
            left: currentLayerItemData.left + 10 + 'px', 
            top: currentLayerItemData.top + 10 + 'px' 
          }">
          <component 
            :is="`MapLayerInfo${currentLayerItem}`"
            :itemData="currentLayerItemData" />
        </div>
      </div>
      
      <!-- 左侧面板区域 -->
      <div class="absolute top-4 left-4 flex flex-col w-1/3 max-w-[360px]" style="height: calc(100vh - 5.5rem);">
        <div class="flex flex-col gap-2 md:gap-4 h-full">
          <!-- 测站设备底数统计面板 -->
          <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 flex flex-col flex-1 min-h-0 overflow-hidden relative" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll" style="flex: 1 1 auto;">
            <div class="p-2.5 md:p-3 flex justify-between items-center">
              <h3 class="text-base md:text-lg font-semibold text-gray-800">测站设备底数</h3>
              <span class="text-sm md:text-base text-gray-600">共 <span class="text-blue-600" style="font-family: 'lcdultra', sans-serif">{{ allNum }}</span> 个测站</span>
            </div>
            <div class="p-2.5 md:p-3 grid grid-cols-2 gap-4 overflow-y-auto flex-grow auto-scroll-container" style="padding-top: 0 !important;" ref="scrollContainer">
              <div v-for="(item, index) in deviceItems" :key="item.value" class="device-item border rounded-lg p-2 transition-all duration-200 flex flex-col items-center text-center" style="cursor: pointer;" :class="{ 'selected': item.value === currentLayerItem, 'border-blue-500 bg-blue-50': item.value === currentLayerItem, 'border-gray-200 hover:border-gray-300': !item.value === currentLayerItem }" @click="toggleSelection(item)">
                <span class="text-sm md:text-base text-gray-800 font-medium mb-1">{{ item.label }}</span>
                <div class="flex items-center justify-center text-blue-600">
                  <!-- <svg class="w-4 h-4 mr-1 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                  </svg> -->
                  <!-- 共： -->
                  <span class="text-sm md:text-base text-blue-600" style="font-family: 'lcdultra', sans-serif">{{ item['total'] || '--' }}
                    <span v-if="item.abnormalCount" class="text-xs text-red-500 mt-1" style="font-family: 'lcdultra', sans-serif">（异常: {{ item.abnormalCount }}）</span>
                  </span>
                </div>
                <div v-if="(item.value === 'realtimeSz' || item.value === 'realtimeBz')" class="text-xs text-red-500 mt-1">
                  <div v-if="item.abnormalCount1" style="font-family: 'lcdultra', sans-serif">（水情异常: {{ item.abnormalCount1 }}）</div>
                  <div v-if="item.abnormalCount2" style="font-family: 'lcdultra', sans-serif">（工情异常: {{ item.abnormalCount2 }}）</div>
                  <div v-if="item.abnormalCount3" style="font-family: 'lcdultra', sans-serif">（视频异常: {{ item.abnormalCount3 }}）</div>
                </div>
                <div v-else-if="item.value === 'realtimeSk'" class="text-xs text-red-500 mt-1">
                  <div v-if="item.abnormalCount1" style="font-family: 'lcdultra', sans-serif">（水情异常: {{ item.abnormalCount1 }}）</div>
                  <div v-if="item.abnormalCount2" style="font-family: 'lcdultra', sans-serif">（雨量异常: {{ item.abnormalCount2 }}）</div>
                  <div v-if="item.abnormalCount3" style="font-family: 'lcdultra', sans-serif">（图片异常: {{ item.abnormalCount3 }}）</div>
                  <div v-if="item.abnormalCount4" style="font-family: 'lcdultra', sans-serif">（视频异常: {{ item.abnormalCount4 }}）</div>
                </div>
                <div v-else-if="item.value === 'realtimeNld'" class="text-xs text-red-500 mt-1">
                  <div v-if="item.abnormalCount1" style="font-family: 'lcdultra', sans-serif">（水情异常: {{ item.abnormalCount1 }}）</div>
                  <div v-if="item.abnormalCount2" style="font-family: 'lcdultra', sans-serif">（视频异常: {{ item.abnormalCount2 }}）</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 直连设备数据监测情况面板 -->
          <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg p-2.5 md:p-3 border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 flex flex-col" style="flex: 0 0 200px;">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-3 md:mb-4">直连设备-测站监测情况</h3>
            <div class="space-y-3 md:space-y-4 flex-grow overflow-y-auto">
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <span class="flex items-center"><span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>设备正常数</span>
                  <span class="text-green-700" style="font-family: 'lcdultra', sans-serif">{{ deviceNum.isOk }}</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" :style="{ width: deviceNum.isOkPer }"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <span class="flex items-center"><span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span>设备异常数</span>
                  <span class="text-red-800" style="font-family: 'lcdultra', sans-serif">{{ deviceNum.isNotOk }}</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-red-500 rounded-full transition-all duration-500" :style="{ width: deviceNum.isNotOkPer }"></div>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-2 pt-2 border-t border-gray-200">
                <p class="text-blue-600 text-sm">设备总数 <span style="font-family: 'lcdultra', sans-serif">{{ deviceNum.num }}</span></p>
                <p class="text-green-800 text-sm">设备正常率 <span style="font-family: 'lcdultra', sans-serif">{{ deviceNum.isOkPer }}</span></p>
              </div>
            </div>
          </div>

          <!-- 镇街存量数据监测情况面板 -->
          <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg p-2.5 md:p-3 border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 flex flex-col" style="flex: 0 0 200px;">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-3 md:mb-4">镇街存量-测站监测情况</h3>
            <div class="space-y-3 md:space-y-4 flex-grow overflow-y-auto">
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <span class="flex items-center"><span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>测站正常数</span>
                  <span class="text-green-700" style="font-family: 'lcdultra', sans-serif">{{ inventoryNum.isOk }}</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" :style="{ width: inventoryNum.isOkPer }"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <span class="flex items-center"><span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span>测站异常数</span>
                  <span class="text-red-800" style="font-family: 'lcdultra', sans-serif">{{ inventoryNum.isNotOk }}</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-red-500 rounded-full transition-all duration-500" :style="{ width: inventoryNum.isNotOkPer }"></div>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-2 pt-2 border-t border-gray-200">
                <p class="text-blue-600 text-sm">测站总数 <span style="font-family: 'lcdultra', sans-serif">{{ inventoryNum.num }}</span></p>
                <p class="text-green-800 text-sm">测站正常率 <span style="font-family: 'lcdultra', sans-serif">{{ inventoryNum.isOkPer }}</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板区域 -->
      <div class="absolute top-4 right-4 flex flex-col gap-2 md:gap-4 w-1/3 max-w-[360px]" style="height: calc(100vh - 5.5rem);">
      
      <!-- 数据质量告警情况面板 -->
      <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 flex flex-col flex-1 min-h-0 overflow-hidden relative" @mouseenter="stopAlertAutoScroll" @mouseleave="startAlertAutoScroll">
        <div class="p-2.5 md:p-3 flex justify-between items-center">
          <h3 class="text-base md:text-lg font-semibold text-gray-800">数据质量告警情况</h3>
          <span class="text-sm md:text-base text-gray-600">共 <span class="text-red-700" style="font-family: 'lcdultra', sans-serif">{{ 3 }}</span> 条告警</span>
        </div>
        <div ref="alertScrollContainer" class="p-2.5 md:p-3 space-y-2 md:space-y-3 overflow-auto" style="padding-top: 0 !important;">
          <!-- 告警记录卡片 -->
          <div 
            v-for="alert in alertData" 
            :key="alert.id" 
            class="bg-gray-50 rounded-lg p-3 border hover:shadow-md transition-shadow duration-200"
          >
            <div class="flex justify-between items-start mb-2">
              <div>
                <span 
                  class="inline-block px-2 py-1 text-xs font-semibold rounded mr-2" 
                  :class="[
                    alert.typeClass.background, 
                    alert.typeClass.text
                  ]"
                >
                  {{ alert.type }}
                </span>
                <span class="text-sm font-medium text-gray-900">{{ alert.stationName }}</span>
              </div>
            </div>
            <p class="text-sm text-gray-700 mb-2">{{ alert.description }}</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-gray-500">告警时间: {{ alert.time }}</span>
              <!-- <span 
                class="inline-block px-2 py-1 text-xs font-semibold rounded" 
                :class="[
                  alert.statusClass.background, 
                  alert.statusClass.text
                ]"
              >
                {{ alert.status }}
              </span> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 设备检修工单情况面板 -->
      <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg p-2.5 md:p-3 border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 h-[138px] flex-shrink-0">
        <div class="flex justify-between items-center mb-1 md:mb-2">
          <h3 class="text-base md:text-lg font-semibold text-gray-800">设备检修工单情况</h3>
          <span class="text-sm md:text-base text-gray-600">共 <span class="text-blue-600" style="font-family: 'lcdultra', sans-serif">{{ totalDevicesHandle }}</span> 条工单</span>
        </div>
        <div class="space-y-3 md:space-y-4">
          <div>
            <div class="pt-1">
              <div class="flex gap-1 mb-2">
                <div class="flex-1 text-center text-xs py-1 bg-blue-100 text-blue-800 rounded" style="font-family: 'lcdultra', sans-serif">禅城(25)</div>
                <div class="flex-1 text-center text-xs py-1 bg-green-100 text-green-800 rounded" style="font-family: 'lcdultra', sans-serif">南海(32)</div>
                <div class="flex-1 text-center text-xs py-1 bg-yellow-100 text-yellow-800 rounded" style="font-family: 'lcdultra', sans-serif">顺德(28)</div>
                <div class="flex-1 text-center text-xs py-1 bg-purple-100 text-purple-800 rounded" style="font-family: 'lcdultra', sans-serif">高明(20)</div>
                <div class="flex-1 text-center text-xs py-1 bg-pink-100 text-pink-800 rounded" style="font-family: 'lcdultra', sans-serif">三水(23)</div>
              </div>
            </div>
            <div class="pt-2">
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <span class="text-orange-500 mr-2" style="font-family: 'lcdultra', sans-serif">进行中: 86</span>
                  <span class="text-green-800" style="font-family: 'lcdultra', sans-serif">已完成: 52</span>
                </div>
                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="h-full flex">
                    <div class="bg-orange-500" style="width: 59.4%"></div>
                    <div class="bg-green-500" style="width: 40.6%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备日常巡检情况面板 -->
      <div class="bg-white/80 backdrop-blur-xl rounded-2xl shadow-lg p-2.5 md:p-3 border border-gray-200 saturate-150 transition-all duration-300 hover:bg-white/90 h-[278px] flex-shrink-0">
        <div class="flex justify-between items-center mb-1 md:mb-2">
          <h3 class="text-base md:text-lg font-semibold text-gray-800">设备日常巡检情况</h3>
          <!-- 年月选择器 -->
          <div class="flex items-center space-x-2">
            <select class="text-sm border border-gray-300 rounded px-2 py-1">
              <option>2023年</option>
              <option>2024年</option>
            </select>
            <select class="text-sm border border-gray-300 rounded px-2 py-1">
              <option>1月</option>
              <option>2月</option>
              <option>3月</option>
              <option>4月</option>
              <option>5月</option>
              <option>6月</option>
              <option>7月</option>
              <option>8月</option>
              <option>9月</option>
              <option>10月</option>
              <option>11月</option>
              <option>12月</option>
            </select>
          </div>
        </div>
        <div class="space-y-3 md:space-y-4">
          <div class="pt-1">
            <div class="space-y-2">
              <div>
                <div class="flex justify-between align-center text-xs md:text-sm text-gray-600 mb-1">
                  <div class="text-center text-xs py-1 px-2 bg-purple-100 text-purple-800 rounded">禅城</div>
                  <span class="inline-block py-0.5 text-sm text-blue-800" style="font-family: 'lcdultra', sans-serif">应巡120</span>
                  <span class="inline-block py-0.5 text-sm text-green-800" style="font-family: 'lcdultra', sans-serif">已巡115</span>
                  <span class="inline-block py-0.5 text-sm text-yellow-600" style="font-family: 'lcdultra', sans-serif">已巡率95.8%</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" style="width: 95.8%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <div class="text-center text-xs py-1 px-2 bg-purple-100 text-purple-800 rounded">南海</div>
                  <span class="inline-block py-0.5 text-sm text-blue-800" style="font-family: 'lcdultra', sans-serif">应巡120</span>
                  <span class="inline-block py-0.5 text-sm text-green-800" style="font-family: 'lcdultra', sans-serif">已巡115</span>
                  <span class="inline-block py-0.5 text-sm text-yellow-600" style="font-family: 'lcdultra', sans-serif">已巡率95.8%</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" style="width: 94.7%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <div class="text-center text-xs py-1 px-2 bg-purple-100 text-purple-800 rounded">顺德</div>
                  <span class="inline-block py-0.5 text-sm text-blue-800" style="font-family: 'lcdultra', sans-serif">应巡120</span>
                  <span class="inline-block py-0.5 text-sm text-green-800" style="font-family: 'lcdultra', sans-serif">已巡115</span>
                  <span class="inline-block py-0.5 text-sm text-yellow-600" style="font-family: 'lcdultra', sans-serif">已巡率95.8%</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" style="width: 94.8%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <div class="text-center text-xs py-1 px-2 bg-purple-100 text-purple-800 rounded">高明</div>
                  <span class="inline-block py-0.5 text-sm text-blue-800" style="font-family: 'lcdultra', sans-serif">应巡120</span>
                  <span class="inline-block py-0.5 text-sm text-green-800" style="font-family: 'lcdultra', sans-serif">已巡115</span>
                  <span class="inline-block py-0.5 text-sm text-yellow-600" style="font-family: 'lcdultra', sans-serif">已巡率95.8%</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" style="width: 93.7%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-xs md:text-sm text-gray-600 mb-1">
                  <div class="text-center text-xs py-1 px-2 bg-purple-100 text-purple-800 rounded">三水</div>
                  <span class="inline-block py-0.5 text-sm text-blue-800" style="font-family: 'lcdultra', sans-serif">应巡120</span>
                  <span class="inline-block py-0.5 text-sm text-green-800" style="font-family: 'lcdultra', sans-serif">已巡115</span>
                  <span class="inline-block py-0.5 text-sm text-yellow-600" style="font-family: 'lcdultra', sans-serif">已巡率95.8%</span>
                </div>
                <div class="h-1.5 md:h-2 bg-gray-600/50 rounded-full overflow-hidden">
                  <div class="h-full bg-green-500 rounded-full transition-all duration-500" style="width: 95.5%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    
    <!-- 底部信息 -->
    <!-- <footer class="absolute bottom-4 left-0 right-0 text-center text-gray-500 text-xs md:text-sm">
      <p>数据更新时间：2023-10-10 10:00:00</p>
    </footer> -->
  </div>
</template>

<script>
import MapEl from 'base/MapEl/MapEl'
import MapLayerPointSz from 'base/MapLayerPoint/Sz'
import MapLayerPointBz from 'base/MapLayerPoint/Bz'
import MapLayerPointSk from 'base/MapLayerPoint/Sk'
import MapLayerPointNld from 'base/MapLayerPoint/Nld'
import MapLayerPointHdz from 'base/MapLayerPoint/Hdz'
import MapLayerPointYlz from 'base/MapLayerPoint/Ylz'
import MapLayerInforealtimeSz from 'base/MapLayerInfo/Sz'
import MapLayerInforealtimeBz from 'base/MapLayerInfo/Bz'
import MapLayerInforealtimeSk from 'base/MapLayerInfo/Sk'
import MapLayerInforealtimeNld from 'base/MapLayerInfo/Nld'
import MapLayerInforealtimeHdz from 'base/MapLayerInfo/Hdz'
import MapLayerInforealtimeYlz from 'base/MapLayerInfo/Ylz'
import { mapState } from 'vuex'
import { dataItems, townList } from 'common/js/modules'

export default {
  name: 'homeMap',
  components: {
    MapEl,
    MapLayerPointSz,
    MapLayerPointBz,
    MapLayerPointSk,
    MapLayerPointNld,
    MapLayerPointHdz,
    MapLayerPointYlz,
    MapLayerInforealtimeSz,
    MapLayerInforealtimeBz,
    MapLayerInforealtimeSk,
    MapLayerInforealtimeNld,
    MapLayerInforealtimeHdz,
    MapLayerInforealtimeYlz
  },
  watch: {
    total: {
      handler (newVal, oldVal) {
        this.updateTotalDevices(newVal)
      },
      deep: true
    }
  },
  computed: {
    allNum ({ deviceItems }) {
      return deviceItems.reduce((num, item) => num + (item.total ? item.total : 0), 0);
    },
    inventoryNum ({ deviceItems, total, totalInventory }) {
      let num = 0
      let isOk = 0
      let isNotOk = 0

      deviceItems.map(item => {
        const itemTotal = total[item.value]
        const itemTotalInventory = totalInventory[item.value]
        
        if (itemTotalInventory) {
          num += itemTotalInventory['全部']

          if (item.value === 'realtimeSz' || item.value === 'realtimeBz') {
            isOk += itemTotalInventory['水情正常']
            isNotOk += itemTotalInventory['全部'] - itemTotalInventory['水情正常']
          } else if (item.value === 'realtimeSk' || item.value === 'realtimeNld') {
            isOk += itemTotalInventory['水位正常']
            isNotOk += itemTotalInventory['全部'] - itemTotalInventory['水位正常']
          } else {
            isOk += itemTotalInventory['正常']
            isNotOk += itemTotalInventory['全部'] - itemTotalInventory['正常']
          }
        } else if (itemTotal) {
          num += itemTotal['全部']
          if (item.value === 'realtimeSz' || item.value === 'realtimeBz') {
            isOk += itemTotal['水情正常']
            isNotOk += itemTotal['全部'] - itemTotal['水情正常']
          } else if (item.value === 'realtimeSk' || item.value === 'realtimeNld') {
            isOk += itemTotal['水位正常']
            isNotOk += itemTotal['全部'] - itemTotal['水位正常']
          } else {
            isOk += itemTotal['正常']
            isNotOk += itemTotal['全部'] - itemTotal['正常']
          }
        }
      })

      return {
        num,
        isOk,
        isNotOk,
        isOkPer: `${(isOk / num * 100).toFixed(2)}%`,
        isNotOkPer: `${(isNotOk / num * 100).toFixed(2)}%`
      }
    },
    deviceNum ({deviceItems, total, totalInventory }) {
      let num = 0
      let isOk = 0
      let isNotOk = 0

      deviceItems.map(item => {
        const itemTotal = total[item.value]
        const itemTotalInventory = totalInventory[item.value]
        
        if (itemTotalInventory) {
          num += itemTotal['全部'] - itemTotalInventory['全部']

          if (item.value === 'realtimeSz' || item.value === 'realtimeBz') {
            isOk += itemTotal['水情正常'] - itemTotalInventory['水情正常']
            isNotOk += (itemTotal['全部'] - itemTotal['水情正常']) - (itemTotalInventory['全部'] - itemTotalInventory['水情正常'])
          } else if (item.value === 'realtimeSk' || item.value === 'realtimeNld') {
            isOk += itemTotal['水位正常'] - itemTotalInventory['水位正常']
            isNotOk += (itemTotal['全部'] - itemTotal['水位正常']) - (itemTotalInventory['全部'] - itemTotalInventory['水位正常'])
          } else {
            isOk += itemTotal['正常'] - itemTotalInventory['正常']
            isNotOk += (itemTotal['全部'] - itemTotal['正常']) - (itemTotalInventory['全部'] - itemTotalInventory['正常'])
          }
        }
      })

      return {
        num,
        isOk,
        isNotOk,
        isOkPer: `${(isOk / num * 100).toFixed(2)}%`,
        isNotOkPer: `${(isNotOk / num * 100).toFixed(2)}%`
      }
    },
    ...mapState({
      total: state => state.home.total,
      totalInventory: state => state.home.totalInventory,
      totalList: state => state.home.totalList,
    })
  },
  created () {
    this.townArr = townList()
    this.initDeviceItems()
    this.updateTotalDevices(this.total)
  },
  mounted () {
    // 组件挂载后开始自动滚动
    setTimeout(() => {
      this.startAutoScroll();
      // 启动数据质量告警面板自动滚动
      this.startAlertAutoScroll();
    }, 5000);
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopAutoScroll();
    this.stopAlertAutoScroll();
  },
  data() {
    return {
      currentLayerList: [],
      currentLayerItem: '',
      scrollInterval: null,
      isScrollingUp: false, // 是否正在向上滚动
      alertScrollInterval: null,
      isAlertScrollingUp: false, // 数据质量告警面板是否正在向上滚动
      deviceItems: [],
      totalDevicesHandle: 100,
      isShowMapLayerInfo: false,
      currentLayerItemData: {}, 
      alertData: [
        {
          id: 1,
          type: '雨量站',
          stationName: '佛山雨量站A',
          description: '数据连续缺失超24小时',
          time: '2024-10-10 08:45:00',
          status: '未下发工单',
          typeClass: {
            background: 'bg-blue-100',
            text: 'text-blue-800'
          },
          statusClass: {
            background: 'bg-orange-100',
            text: 'text-orange-800'
          }
        },
        {
          id: 2,
          type: '水闸',
          stationName: '顺德水闸B',
          description: '开度数据异常波动',
          time: '2024-10-10 08:45:00',
          status: '已下发工单',
          typeClass: {
            background: 'bg-purple-100',
            text: 'text-purple-800'
          },
          statusClass: {
            background: 'bg-green-100',
            text: 'text-green-800'
          }
        },
        {
          id: 3,
          type: '水质自动监测（时）',
          stationName: '南海水质站C',
          description: '水质数据延迟推送',
          time: '2024-10-10 08:45:00',
          status: '已下发工单',
          typeClass: {
            background: 'bg-teal-100',
            text: 'text-teal-800'
          },
          statusClass: {
            background: 'bg-green-100',
            text: 'text-green-800'
          }
        },
        {
          id: 4,
          type: '雨量站',
          stationName: '佛山雨量站A',
          description: '数据连续缺失超24小时',
          time: '2024-10-10 08:45:00',
          status: '未下发工单',
          typeClass: {
            background: 'bg-blue-100',
            text: 'text-blue-800'
          },
          statusClass: {
            background: 'bg-orange-100',
            text: 'text-orange-800'
          }
        },
        {
          id: 5,
          type: '雨量站',
          stationName: '佛山雨量站A',
          description: '数据连续缺失超24小时',
          time: '2024-10-10 08:45:00',
          status: '未下发工单',
          typeClass: {
            background: 'bg-blue-100',
            text: 'text-blue-800'
          },
          statusClass: {
            background: 'bg-orange-100',
            text: 'text-orange-800'
          }
        },
        {
          id: 6,
          type: '雨量站',
          stationName: '佛山雨量站A',
          description: '数据连续缺失超24小时',
          time: '2024-10-10 08:45:00',
          status: '未下发工单',
          typeClass: {
            background: 'bg-blue-100',
            text: 'text-blue-800'
          },
          statusClass: {
            background: 'bg-orange-100',
            text: 'text-orange-800'
          }
        }
      ]
    }
  },
  methods: {
    showInfo (item) {
      this.currentLayerItemData = item
      this.isShowMapLayerInfo = true
    },
    hideInfo () {
      this.isShowMapLayerInfo = false
      this.currentLayerItemData = {}
    },
    initDeviceItems () {
      const list = dataItems()

      // const index1 = list.findIndex(item => item.value === 'realtimeFszjldt')
      // list.splice(index1, 1)

      // const index2 = list.findIndex(item => item.value === 'realtimeXbdldt')
      // list.splice(index2, 1)  

      this.deviceItems = list
    },
    updateTotalDevices (list) {
      this.deviceItems.map(item => {
        const obj = list[item.value]

        if (obj) {
          const allTotal = obj['全部']
          item.total = allTotal

          switch (item.value) {
            case 'realtimeSz':
            case 'realtimeBz':
              item.abnormalCount1 = allTotal - obj['水情正常']
              item.abnormalCount2 = allTotal - obj['工情正常']
              item.abnormalCount3 = allTotal - obj['视频全部在线']
              break
            case 'realtimeSk':
              item.abnormalCount1 = allTotal - obj['水位正常']
              item.abnormalCount2 = allTotal - obj['雨量正常']
              item.abnormalCount3 = allTotal - obj['图片正常']
              item.abnormalCount4 = allTotal - obj['视频全部在线']
              break
            case 'realtimeNld':
              item.abnormalCount1 = allTotal - obj['水位正常']
              item.abnormalCount2 = allTotal - obj['视频全部在线']
              break
            default:
              item.abnormalCount = allTotal - obj['正常']
              break
          }
        }
      })
    },
    toggleSelection(item) {
      if (this.currentLayerItem === item.value) {
        this.currentLayerItem = ''
        this.currentLayerList = []
      } else {
        this.currentLayerItem = item.value
        this.updatePosData()
      }
    },
    startAutoScroll() {
      // 清除之前的定时器
      if (this.scrollInterval) {
        cancelAnimationFrame(this.scrollInterval);
      }
      
      // 使用递归requestAnimationFrame实现连续滚动
      const scrollStep = () => {
        const container = this.$refs.scrollContainer;

        if (container) {
          // 检查容器是否可以滚动
          if (container.scrollHeight <= container.clientHeight) {
            this.scrollInterval = requestAnimationFrame(scrollStep);
            return; // 内容不超出容器高度，无需滚动
          }
          
          const scrollSpeed = 0.5; // 滚动速度(px/帧)
          const maxScroll = container.scrollHeight - container.clientHeight;
          
          // 如果正在向上滚动
          if (this.isScrollingUp) {
            // 向上滚动
            container.scrollBy({
              top: -scrollSpeed,
              behavior: 'instant'
            });
            
            // 如果已经滚动到顶部，恢复正常向下滚动
            if (container.scrollTop <= 0) {
              this.isScrollingUp = false;
            }
          } 
          // 判断是否已滚动到底部
          // 当滚动位置接近最大滚动位置时开始向上滚动
          else if (container.scrollTop >= maxScroll - 5) {
            // 已经滚动到底部，开始向上滚动
            this.isScrollingUp = true;
            container.scrollBy({
              top: -scrollSpeed,
              behavior: 'instant'
            });
          } else {
            // 向下滚动
            container.scrollBy({
              top: scrollSpeed,
              behavior: 'instant'
            });
          }
        }
        
        // 继续下一帧的滚动
        this.scrollInterval = requestAnimationFrame(scrollStep);
      };
      
      // 启动滚动
      this.scrollInterval = requestAnimationFrame(scrollStep);
    },
    startAlertAutoScroll() {
      // 清除之前的定时器
      if (this.alertScrollInterval) {
        cancelAnimationFrame(this.alertScrollInterval);
      }
      
      // 使用递归requestAnimationFrame实现连续滚动
      const scrollStep = () => {
        const container = this.$refs.alertScrollContainer;

        if (container) {
          // 检查容器是否可以滚动
          if (container.scrollHeight <= container.clientHeight) {
            this.alertScrollInterval = requestAnimationFrame(scrollStep);
            return; // 内容不超出容器高度，无需滚动
          }
          
          const scrollSpeed = 0.5; // 滚动速度(px/帧)
          const maxScroll = container.scrollHeight - container.clientHeight;
          
          // 如果正在向上滚动
          if (this.isAlertScrollingUp) {
            // 向上滚动
            container.scrollBy({
              top: -scrollSpeed,
              behavior: 'instant'
            });
            
            // 如果已经滚动到顶部，恢复正常向下滚动
            if (container.scrollTop <= 0) {
              this.isAlertScrollingUp = false;
            }
          } 
          // 判断是否已滚动到底部
          // 当滚动位置接近最大滚动位置时开始向上滚动
          else if (container.scrollTop >= maxScroll - 5) {
            // 已经滚动到底部，开始向上滚动
            this.isAlertScrollingUp = true;
            container.scrollBy({
              top: -scrollSpeed,
              behavior: 'instant'
            });
          } else {
            // 向下滚动
            container.scrollBy({
              top: scrollSpeed,
              behavior: 'instant'
            });
          }
        }
        
        // 继续下一帧的滚动
        this.alertScrollInterval = requestAnimationFrame(scrollStep);
      };
      
      // 启动滚动
      this.alertScrollInterval = requestAnimationFrame(scrollStep);
    },
    stopAutoScroll() {
      if (this.scrollInterval) {
        cancelAnimationFrame(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
    stopAlertAutoScroll() {
      if (this.alertScrollInterval) {
        cancelAnimationFrame(this.alertScrollInterval);
        this.alertScrollInterval = null;
      }
    },
    realtimeSzDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeSz']

       if (!list) {
        return
      }

      list.map(item => {
        const zhenName = this.townArr.find(child => child.value === item.zhenCode) || {}
        const obj = mapRef.toScreen(item.coox, item.cooy)
        
        arr.push({
          id: item.stcd,
          name: item.stnm,
          area: item.addvcdName,
          town: zhenName,
          dataNum: item.upz,
          dataNum1: item.dwz,
          dataTime: item.wasTm,
          status: item.wasStatus,
          __custom_detail: item.__custom_detail,
          __custom_videoDetail: item.__custom_videoDetail,
          source: item.__custom_source,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    realtimeBzDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeBz']

       if (!list) {
        return
      }

      list.map(item => {
        const zhenName = this.townArr.find(child => child.value === item.zhenCode) || {}
        const obj = mapRef.toScreen(item.coox, item.cooy)
        
        arr.push({
          id: item.stcd,
          name: item.stnm,
          area: item.addvcdName,
          town: zhenName,
          dataNum: item.inpoolLevel,
          dataNum1: item.outpoolLevel,
          dataTime: item.pumpTm,
          status: item.pumpStatus,
          __custom_detail: item.__custom_detail,
          __custom_videoDetail: item.__custom_videoDetail,
          source: item.__custom_source,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    realtimeSkDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeSk']

       if (!list) {
        return
      }

      list.map(item => {
        const zhenName = this.townArr.find(child => child.value === item.zhencode) || {}
        const obj = mapRef.toScreen(item.coox, item.cooy)
        
        arr.push({
          id: item.stcd,
          name: item.stnm,
          area: item.addvcdName,
          town: zhenName,
          dataNum: item.rz,
          dataTime: item.rsvrTm,
          status: item.status,
          source: item.stsys,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    realtimeNldDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeNld']

      if (!list) {
        return
      }

      list.map(item => {
        const obj = mapRef.toScreen(item.xCoor, item.yCoor)
        
        arr.push({
          id: item.stcd,
          name: item.name,
          area: item.district,
          town: item.zhenname,
          dataNum: item.z,
          dataTime: item.zTm,
          status: item.status,
          source: item.stsys,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    realtimeHdzDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeHdz']

       if (!list) {
        return
      }

      list.map(item => {
        const zhenName = this.townArr.find(child => child.value === item.zhenCode) || {}
        const obj = mapRef.toScreen(item.coox, item.cooy)
        
        arr.push({
          id: item.stcd,
          name: item.stnm,
          area: item.addvcdName,
          town: zhenName,
          dataNum: item.z,
          dataTime: item.tm,
          status: item.status,
          source: item.stsys,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    realtimeYlzDataHandle () {
      const mapRef = this.$refs['JMap']
      if (!mapRef) {
        return
      }

      const arr = []
      const list = this.totalList['realtimeYlz']

       if (!list) {
        return
      }

      list.map(item => {
        const obj = mapRef.toScreen(item.coox, item.cooy)
        
        arr.push({
          id: item.stcd,
          name: item.stnm,
          area: item.addvcdName,
          town: item.zhenName,
          dataNum: item.drp,
          dataTime: item.tm,
          status: item.status,
          source: item.stsys,
          left: obj.x,
          top: obj.y,
        })
      })

      this.currentLayerList = arr
    },
    updatePosData () {
      if (this.currentLayerItem) {
        this[`${this.currentLayerItem}DataHandle`]()
      }
    },
    mapZoonChange () {
      this.updatePosData()
    },
    mapCenterChange () {
      this.updatePosData()
    },
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopAutoScroll();
    this.stopAlertAutoScroll();
  }
}
</script>

<style scoped lang="scss">
.homeMap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  > .homeMap-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
}

/* 地图容器样式 */
.map-wrapper {
  width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

/* 左右侧面板容器样式 */
.absolute.top-4.left-4,
.absolute.top-4.right-4 {
  z-index: 20;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* 面板样式优化 */
.bg-white\/80 {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(209, 213, 219, 0.5);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .absolute.top-4.left-4,
  .absolute.top-4.right-4 {
    flex-direction: column;
    top: 2rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
    width: calc(100% - 2rem);
  }
  
  .w-1\/3 {
    width: 100%;
  }
}

/* 底部信息样式 */
.absolute.bottom-4.left-0.right-0 {
  z-index: 20;
  color: #4b5563;
}

.mapLayerInfo {
	position: absolute;
	transform: translate3D(0, -50%, 0);
	z-index: 1000;
	pointer-events: none; /* 防止信息框干扰鼠标事件 */
}

</style>